In `@admin-ui/app/components/GluuButton/GluuButton.tsx`:
- Around line 70-80: Extract the nested ternary that computes backgroundColor in
GluuButton into a small helper function (eg. resolveBackgroundColor) that
accepts the inputs disableHoverStyles, keepBgOnHover, outlined, isHovered,
isDisabled, bg, and hoverBg, implements the same branching logic, and returns
the resolved color; then replace the inline nested ternary with a single call to
resolveBackgroundColor(...) from the style so the behavior of the component
(GluuButton) is unchanged but readability is improved.

In `@admin-ui/app/customColors.ts`:
- Around line 31-36: The token name addPropertyBgLight is misleading because the
value '#132E4D' is dark; rename tokens to make theme ownership explicit (e.g.,
addPropertyBgInLightTheme or light_addPropertyBg) or add a brief comment above
these constants explaining that the Light/Dark suffix indicates the theme, not
lightness; update all references to addPropertyBgLight, addPropertyTextDark,
customParamsBoxLight, customParamsBoxDark, customParamsInputDark, and
customParamsTitleLight to the new names (or keep names but add the explanatory
comment) to avoid confusion for future maintainers.

In `@admin-ui/app/routes/Dashboards/Chart/TooltipDesign.tsx`:
- Around line 48-54: The tooltip mapping renders item values directly but
item.payload is Record<string, unknown>, so value is unknown and may be an
object causing React to throw; in the payload.map handler (where dataKey, label
and value are computed) coerce or guard value before rendering—e.g., detect
null/undefined and render an empty string, primitives as-is, and objects via
JSON.stringify or a safe formatter, and use that safe string/JSX when rendering
instead of the raw value; also make the React key unique by replacing
key={dataKey || idx} with a combined key like `${dataKey}-${idx}` to avoid
duplicate keys.

In `@admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx`:
- Line 65: Replace the hard-coded 'rgba(255, 255, 255, 0.12)' border color used
in DateRangeSelector's style (the borderColor assignment inside the
DateRangeSelector component) with the design token customColors.darkBorder when
isDark is true, preserving the existing conditional (isDark ? ... :
customColors.borderInput) so dark-mode borders use the shared token.
- Around line 88-117: The slotProps.textField.sx block is duplicated for the
start and end DatePickers; extract it into a shared constant (e.g.
datePickerSlotProps or datePickerSx) defined above the return in the
DateRangeSelector component and replace both slotProps references with that
constant; ensure the constant preserves size: 'small', InputLabelProps: {
shrink: true }, the sx object that references isDark and customColors, and then
use the shared identifier in both pickers (replace each slotProps.textField.sx
usage) so styling is DRY and identical for start/end pickers.

In `@admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx`:
- Around line 53-63: The Tooltip's formatter prop in MauTrendChart is ignored
because content is provided; remove the dead formatter prop from the Tooltip
call and move the formatting logic into the TooltipDesign used by content:
update TooltipDesign props (or its render logic) to accept and apply
formatNumber to the incoming value (or accept a formatter prop passed from
MauTrendChart), so TooltipDesign displays the formatted number while still
receiving themeColors and isDark as before; reference MauTrendChart, Tooltip,
TooltipDesign, and formatNumber to locate and update the code.

In `@admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx`:
- Around line 74-86: Remove the unused formatter prop from the Tooltip JSX (the
formatter={(value: number) => formatNumber(value)} on the Tooltip component)
because Recharts ignores formatter when a custom content prop is provided; keep
the content prop that renders TooltipDesign as-is. Also remove the now-unused
formatNumber import (originally imported near line 13) to avoid dead code and
unused imports. Ensure no other references to formatNumber remain before
committing.

In `@admin-ui/plugins/admin/components/MAU/components/TokenTrendChart.tsx`:
- Line 54: Replace the hardcoded CartesianGrid stroke color with a theme-derived
color so the grid adapts to dark/light modes: update the CartesianGrid in
TokenTrendChart (and the same CartesianGrid usage in MauTrendChart) to use the
appropriate value from themeColors (for example themeColors.borderColor or a
dedicated themeColors.gridColor) instead of "#e0e0e0", ensuring the component
imports/receives themeColors or accesses the theme prop used elsewhere in these
files.
- Line 20: Remove the unused import by deleting the import statement for the
symbol "customColors" in the TokenTrendChart component (the import line "import
customColors from '@/customColors'"); ensure no other code references
"customColors" in TokenTrendChart.tsx and run a quick typecheck/lint to confirm
the unused-import warning is resolved.

In `@admin-ui/plugins/admin/components/MAU/MauPage.style.ts`:
- Around line 17-20: The theme parameter in the makeStyles callback for
useMauStyles (signature currently using "theme: Theme") is unused; rename it to
_theme to indicate intentional non-use and satisfy no-unused-vars linting.
Update the callback parameter list in the makeStyles<MauStylesParams>() function
(the same location where { themeColors, isDark } is destructured) to use _theme:
Theme instead of theme: Theme.

In `@admin-ui/plugins/admin/components/MAU/MauPage.tsx`:
- Around line 133-144: Replace the inline style on the wrapper div around
DateRangeSelector with a Bootstrap utility class for spacing: remove style={{
marginBottom: 24 }} and add className="mb-4" on the div that contains
<DateRangeSelector ... /> (the component and handlers like DateRangeSelector,
handleStartDateChange, handleEndDateChange, handlePresetSelect, handleApply
remain unchanged).

In `@admin-ui/plugins/admin/components/Settings/SettingsPage.style.ts`:
- Around line 63-73: Replace the hardcoded '#0A2540' color with the design token
customColors.primaryDark in the SettingsPage.style.ts style objects (e.g., in
the settingsLabels rule and the other similar block referenced in the review) so
color usage matches headerTitle; update any style entries that currently use
'#0A2540' to use customColors.primaryDark and ensure customColors is
imported/available in the module.
- Around line 176-181: The focus rule in SettingsPage.style.ts currently removes
visible focus (selector '&:focus' sets outline: 'none' and a transparent
border), breaking keyboard accessibility; change the '&:focus' block in the
SettingsPage.style.ts (where isDark and customColors are used) to remove
outline: 'none' and transparent border and instead apply a visible,
high-contrast focus indicator — for example set a non-transparent borderColor
(use customColors.primaryDark or a dedicated customColors.focus) and/or add a
boxShadow like `0 0 0 3px rgba(...)` that adapts to isDark so keyboard users can
see focus while preserving the existing backgroundColor/color logic.

In `@admin-ui/plugins/admin/components/Settings/SettingsPage.tsx`:
- Around line 497-534: The map over formik.values.additionalParameters currently
uses the array index as the React key (in the JSX mapping that renders the
Inputs and GluuButton), which breaks when items are spliced; instead add a
stable unique id to each parameter object when creating a new entry (e.g., set
id: crypto.randomUUID() on push into formik.values.additionalParameters) and
change the map to use that id as the key; update the removal handler (the
onClick that currently does splice by index) to remove by id (e.g., filter out
the item with matching id) and then call
formik.setFieldValue('additionalParameters', newArray) so React can correctly
track items and avoid focus/stale-state bugs.
- Around line 4-5: Replace the untyped import/use of useDispatch with the typed
useAppDispatch to ensure type-safe dispatching: change the import from
useDispatch (react-redux) to useAppDispatch from '@/redux/hooks' and update any
references to useDispatch() (e.g., dispatch = useDispatch()) to useAppDispatch()
in SettingsPage.tsx alongside the existing useAppSelector usage.

In `@admin-ui/app/customColors.ts`:
- Around line 34-39: Remove the two unused color tokens customParamsBoxLight and
customParamsTitleLight from admin-ui/app/customColors.ts; locate the object
where addPropertyBgLight, addPropertyTextDark, customParamsBoxDark, and
customParamsInputDark are defined and delete the entries for
customParamsBoxLight and customParamsTitleLight, then run a repo-wide search to
confirm no remaining references and update any exports if necessary.

In `@admin-ui/app/routes/Dashboards/Chart/TooltipDesign.tsx`:
- Around line 19-27: TooltipDesign currently hardcodes MAU/chart-specific keys
in the internal labelMap which bloats a shared component; refactor TooltipDesign
to accept an optional prop (e.g., labelMap?: Record<string,string> or
labelFormatter?: (key:string)=>string) and default to the current map if none
provided, update the TooltipDesign component signature and its consumers to pass
custom maps/formatters when needed, and add/adjust the DashboardTypes (or
component props interface) to declare the new optional prop so consumers can
override labels without editing TooltipDesign's internal labelMap.

In `@admin-ui/app/utils/buttonUtils.ts`:
- Around line 14-18: The current hovered outlined color uses string
concatenation `${bg}15`, which only works for 6‑digit hex; update the outlined
hover branch (the code using the variables outlined, isHovered, isDisabled, and
bg) to use a proper alpha utility instead of appending "15" — import alpha from
'@mui/system' (or your project's alpha helper) and return alpha(bg, 0.08) when
isHovered && !isDisabled; keep the existing transparent return for non-hovered
outlined state.

In `@admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx`:
- Around line 37-48: The inline style object passed to the GluuText component in
DateRangeSelector.tsx is recreated on every render; extract that object into a
stable value (either as a module-level constant like HEADING_STYLE or memoize it
with useMemo) and replace the inline literal in the GluuText style prop so the
same object reference is reused across renders; update the GluuText call that
currently supplies the literal style to use the new constant or memoized
variable.
- Around line 53-77: The inline borderRadius in each GluuButton inside
ButtonGroup is overriding grouped styling and breaking the connected appearance;
update the DateRangeSelector by removing the borderRadius from the inline style
passed to GluuButton (locate the map over DATE_PRESETS using GluuButton,
onPresetSelect and selectedPreset) so ButtonGroup can apply its default corner
clipping, or if you intend independent pill buttons replace ButtonGroup with a
simple flex container and keep borderRadius there instead.

In `@admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx`:
- Around line 53-65: The current cast (props as React.ComponentProps<typeof
TooltipDesign>) spreads all Recharts callback props into TooltipDesign; narrow
this by picking only the fields TooltipDesign actually uses inside the content
renderer: in the Tooltip content prop, replace the broad cast with a typed
extraction or Pick of the specific props (e.g., create a local type alias for
the subset of Recharts props you need and map props to that shape) and pass only
those into TooltipDesign; update references to Tooltip, TooltipDesign, and
TooltipDesignProps in MauTrendChart.tsx so unrelated fields like
label/coordinate/viewBox are not forwarded.

In `@admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx`:
- Around line 21-29: Extract the duplicated theme logic into a small hook (e.g.,
useMauTheme) that calls getThemeColor(state.theme), derives isDark (state.theme
=== THEME_DARK), and returns the compact themeColors object { cardBg:
themeColors.dashboard.supportCard ?? themeColors.menu.background, text:
themeColors.fontColor } plus isDark; then replace the inline logic in
TokenDistributionChart, TokenTrendChart and MauPage.tsx with calls to
useMauTheme and pass its themeColors/isDark result into useMauStyles to keep
behavior identical (refer to getThemeColor, THEME_DARK, useMauStyles, and the
components TokenDistributionChart/TokenTrendChart/MauPage).

In `@admin-ui/plugins/admin/components/MAU/MauPage.tsx`:
- Around line 107-111: handlePresetSelect calls createDate() twice causing
potential clock-skew; capture a single now = createDate() once inside
handlePresetSelect and use that same now when computing startDate via
subtractDate(now, months, 'months') and when calling setEndDate(now), then call
setSelectedPreset(months); update the function (handlePresetSelect) to use the
single now variable so both start and end use the identical timestamp.
- Around line 162-176: summaryCards currently uses translated text as the React
key (key={card.text}) which is unstable across locales; update the data in
summaryCards to include a stable identifier (e.g., id) and change the JSX in
MauPage to use that stable id for the key (e.g., key={card.id}), falling back to
index only if no id exists; update any creator of summaryCards so each card
object includes a unique id and leave DashboardSummaryCard and mauClasses usage
unchanged.
- Around line 35-59: The dashboardThemeColors object adds unused properties
statusCardBg and statusCardBorder which are never consumed; remove those
properties so dashboardThemeColors only contains the baseColors and any values
actually used (cardBg, cardBorder, text, textSecondary), and ensure the call to
useMauStyles still passes the expected themeColors ({ cardBg:
dashboardThemeColors.cardBg, text: dashboardThemeColors.text }) without the dead
fields; update any related references to dashboardThemeColors, statusCardBg, or
statusCardBorder to use the existing cardBg/cardBorder fields or remove them if
unused.

In `@admin-ui/plugins/admin/components/Settings/SettingsPage.style.ts`:
- Around line 165-182: The placeholder color in the customParamsInput style is
currently set to the same color as input text in dark mode; update the
'&::placeholder' rule inside customParamsInput to use customColors.textMutedDark
when isDark is true (keep existing light-mode placeholder color) so the
placeholder appears visually muted relative to the input text; edit the
customParamsInput block referenced above to replace customColors.white with
customColors.textMutedDark for the dark-mode placeholder.

In `@admin-ui/plugins/admin/components/Settings/SettingsPage.tsx`:
- Line 497: Replace the inline type annotation "(param: { id: string; key?:
string; value?: string }, index: number)" in the arrow callback with the
imported AdditionalParameterFormItem type (i.e., use "(param:
AdditionalParameterFormItem, index: number)"), and add an import for
AdditionalParameterFormItem from the helper module where it’s defined; this
removes the duplicated shape and keeps the component in sync with the
AdditionalParameterFormItem interface.

In `@admin-ui/plugins/admin/helper/settings.ts`:
- Line 43: Replace uses of crypto.randomUUID() with the project's uuidv4()
utility and import it from the Util module; specifically, update the object
construction that sets id: crypto.randomUUID() in the helper (function/constant
where id is assigned) and the occurrence inside the SettingsPage component
(component/method around the id assignment at the settings creation). Ensure you
add an import for uuidv4 from the common Util utility and call uuidv4() in place
of crypto.randomUUID() so it falls back to crypto.getRandomValues() in
non-secure contexts.

In `@admin-ui/app/context/theme/config.ts`:
- Around line 54-60: The cancel color config currently mixes colors and a
behavioral flag (cancel { backgroundColor, textColor, borderColor, outlined }),
so remove the outlined boolean from the color token object and move it into a
component/style-level variant (e.g., ButtonVariants or a separate buttonStyle
config) so color tokens only contain colors; update the consumers of the cancel
token to read the new flag from the component/variant (e.g.,
ButtonConfig.cancelVariant.outlined or ButtonProps.variant = 'outlined') and
ensure any other similar entries (the other instance around the 125-131 area)
are refactored the same way so behavior flags live with rendering logic, not in
the color token objects.
- Around line 42-71: Remove the duplicated errorColor definition inside the
settings object and rely on the top-level errorColor (symbol: errorColor) to
avoid divergence; update consumers to reference the top-level errorColor (or
delete the nested settings.errorColor entry) so only the top-level errorColor is
the single source of truth for both themes (locate the settings object and
top-level errorColor in the theme config to make this change).

In `@admin-ui/app/customColors.ts`:
- Around line 30-33: The token name addPropertyBgLight is misleading because its
value (`#132E4D`) is a dark color; rename the token to addPropertyBgDark in
customColors.ts (replacing addPropertyBgLight) and update all references (e.g.,
where the light theme references it in theme/config.ts) to use
addPropertyBgDark, or if the dark color is intentional for the light theme
instead add an inline comment next to addPropertyBgLight clarifying the intent;
ensure you also update any exported typings or usages so names remain consistent
(check references to addPropertyBgLight, addPropertyTextDark,
customParamsBoxDark, customParamsInputDark).

In `@admin-ui/app/locales/pt/translation.json`:
- Around line 817-819: Remove the invalid base key "permissions_count" (which
contains ICU-style plural syntax inside i18next interpolation) from the locale
files and keep only the correct i18next plural keys "permissions_count_one" and
"permissions_count_other"; search for the keys permissions_count,
permissions_count_one, and permissions_count_other in the translation JSONs and
delete the base permissions_count entry so i18next will use the existing
suffixed plural keys.

In `@admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx`:
- Around line 114-135: The current buttonLayout useMemo composes class strings
by manual concatenation (see buttonLayout and buttonStates usage) which is
fragile; replace the string-building with a class-composition utility (e.g.,
clsx or classnames) to build back/cancel/apply classes based on
buttonStates.showBack, showCancel, showApply, hasAllThreeButtons, and
hasAnyButton, and update imports to include the chosen utility; ensure you
construct each class with boolean conditionals (e.g., clsx('d-flex', {
'ms-auto': ..., 'me-0': ... })) so spacing and edge cases are handled cleanly.
- Around line 90-103: Remove the unused derived state hasBackAndCancel from the
useMemo in GluuFormFooter: delete the hasBackAndCancel constant and remove it
from the returned object inside the buttonStates computation (the useMemo that
references showBack, showCancel, showApply). Ensure no other code in the
component references hasBackAndCancel (e.g., buttonLayout or JSX); if any
references exist, update them to use the existing
hasAnyButton/hasAllThreeButtons flags instead.
- Line 105: The fallback theme uses an invalid literal causing buttonColor to
become "primary-darkBlack"; update the selectedTheme computation to use the
existing DEFAULT_THEME constant (which is 'dark') instead of the hardcoded
'darkBlack' so that useMemo for selectedTheme (and subsequently buttonColor)
always yields a valid theme value; locate the selectedTheme definition near
buttonColor in GluuFormFooter.tsx and replace the fallback with DEFAULT_THEME
(importing DEFAULT_THEME from the theme constants if not already imported).

In `@admin-ui/app/routes/Apps/Gluu/GluuLabel.tsx`:
- Line 76: The inline tooltip style object is recreated each render; extend the
existing tooltipStyle memo to compute and return the full style (e.g.,
fullTooltipStyle = useMemo(() => ({ zIndex: 101, maxWidth: '45vw',
...tooltipStyle }), [tooltipStyle]) ) and then use that memoized
fullTooltipStyle in the JSX instead of { zIndex: 101, maxWidth: '45vw',
...tooltipStyle }; update references in GluuLabel to use fullTooltipStyle
similarly to how labelStyle is memoized.

In `@admin-ui/app/routes/Apps/Gluu/GluuThemeFormFooter.tsx`:
- Around line 138-152: The apply button JSX is duplicated in the leftGroup and
rightGroup; extract a reusable helper (e.g., renderApplyButton) that returns the
GluuButton configured with applyButtonType, onApply, disableApply, isLoading,
applyLabel, buttonColors.apply and SHARED_BUTTON_PROPS, and replace both
duplicated blocks with {buttonStates.showApply && renderApplyButton()}; ensure
the helper respects the conditional on applyButtonType (only set onClick when
type==='button') and preserves loading/disabled/title props so behavior remains
identical.
- Around line 107-112: Replace the unnecessary useMemo wrappers for simple
string fallbacks: remove useMemo usage around backLabel, cancelLabel, and
applyLabel and define them as plain const variables (e.g., const backLabel =
backButtonLabel || t('actions.back')) so you eliminate the memoization overhead;
update occurrences that reference these symbols and remove the associated
dependency arrays and imports if useMemo is no longer used in
GluuThemeFormFooter.tsx.

In `@admin-ui/app/routes/Apps/Gluu/styles/GluuThemeFormFooter.style.ts`:
- Around line 41-49: The getButtonColors function unnecessarily recreates an
object from colors.formFooter; simplify by returning colors.formFooter directly
(i.e., replace the object literal with return colors.formFooter) and ensure the
return type of getButtonColors matches the type of formFooter from getThemeColor
so no type mismatch occurs; keep references to the same symbols:
getButtonColors, getThemeColor, and formFooter.

In `@admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx`:
- Line 34: getDatePickerTextFieldSlotProps(isDark) returns a new object each
render causing unnecessary re-renders when passed as slotProps to the two
DatePicker components; wrap the call that assigns datePickerTextFieldSlotProps
in React.useMemo (with isDark as the dependency) so the object reference is
stable across renders, and ensure useMemo is imported/available in the
DateRangeSelector component.
- Around line 121-128: The inline style object passed in the DateRangeSelector
component for the "View" button (the object containing minWidth, borderRadius,
fontFamily, fontStyle, lineHeight, letterSpacing) is recreated on every render;
extract this literal into a module-level constant (e.g., BUTTON_VIEW_STYLE or
VIEW_BUTTON_STYLE) and replace the inline object in the JSX with that constant
to avoid unnecessary allocations and match the title-style extraction pattern
used elsewhere in the file.

In `@admin-ui/plugins/admin/components/MAU/components/MauSummaryCards.tsx`:
- Line 73: The total_tokens card in MauSummaryCards.tsx uses a hardcoded
customColors.textSecondary for its accent, which is not theme-aware; update the
component to use a theme-aware value by pulling the token accent from
CHART_COLORS_BY_THEME (or chartColors) instead of customColors.textSecondary,
and add a dedicated token color entry to CHART_COLORS_BY_THEME (e.g., token or
totalTokens) so the card accent follows light/dark themes consistently; update
any references in MauSummaryCards.tsx to use that new key.

In `@admin-ui/plugins/admin/components/MAU/components/TokenTrendChart.tsx`:
- Around line 59-68: The Tooltip content callback in TokenTrendChart (and
similarly in MauTrendChart and TokenDistributionChart) currently casts props to
React.ComponentProps<typeof TooltipDesign>, which masks mismatches between
Recharts' tooltip props and TooltipDesignProps; update the implementation to
avoid the unsafe cast by either (a) creating a union/extended type (e.g., extend
TooltipDesignProps with Recharts' Tooltip payload props like label, position,
viewBox, coordinate) and use that as the prop type for TooltipDesign, or (b)
type the content callback with Recharts' TooltipProps and explicitly pick/pass
only the expected props into <TooltipDesign /> (e.g., extract backgroundColor,
textColor, isDark and any needed fields) without an as-cast; apply the same
change in TokenTrendChart, MauTrendChart, and TokenDistributionChart to preserve
type safety.

In `@admin-ui/plugins/admin/components/MAU/constants.ts`:
- Around line 31-32: The MAU dark-theme mapping uses customColors.statusActive
for the chart accent which couples status indicator styling with chart color;
add a new color token (e.g., customColors.mauAccentDark) in the color tokens
file and initialize it to the same hex as statusActive, then update the
THEME_DARK entry in this file (the mau key) to use customColors.mauAccentDark
instead of customColors.statusActive so chart and status colors are decoupled.

In `@admin-ui/plugins/admin/components/Settings/SettingsPage.style.ts`:
- Around line 75-85: Replace hardcoded font size and weight in the
settingsLabels style: instead of '15px' use a design-system fontSizes value
(choose fontSizes.base for 14px or fontSizes.md for 16px) and replace numeric
600 with fontWeights.semiBold; update the selector under settingsLabels (the
rule targeting '& label, & label h5, & label .MuiSvgIcon-root') to reference
fontSizes and fontWeights constants while keeping existing references to
themeColors.fontColor, fontFamily, and letterSpacing.normal.